<template>
  <div class="container">
    <my-table :tableOption="tableOption" :tableData="tableData">
      <!-- 开启跟踪 -->
      <template v-slot:isMark="data">
        <el-switch v-model="data.isMark.isMark" @change="switchChange(data.isMark)"></el-switch>
      </template>
      <!-- 性格标签 -->
      <template v-slot:tags="data">
        <span class="tags" v-for="(item,index) in data.tags.tags" :key="index">
          <el-tag>{{ item }}</el-tag>
        </span>
      </template>
      <!-- 头像 -->
      <template v-slot:img="data">
        <div class="demo-image__preview">
          <el-image
            style="width: 80px; height: 80px"
            :src="data.img.img"
            :preview-src-list="[data.img.img]"
          ></el-image>
        </div>
      </template>
      <!-- 操作 -->
      <template v-slot:operate="data">
        <el-button size="mini" icon="el-icon-search" @click="previewCurrent(data.operate)"></el-button>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click="editCurrent(data.operate)"
        ></el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="deleteCurrent(data.operate)"
        ></el-button>
      </template>
    </my-table>
  </div>
</template>

<script>
import myTable from "@/components/my-table";
import RandExp from "randexp"; // 随机生成匹配正则的字符串
const randomStr = (type) => {
  if (type === "phone") {
    return new RandExp(/^1(3|4|5|6|7|8|9)\d{9}$/).gen();
  }
  if (type === "date") {
    return new RandExp(
      /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
    ).gen();
  }
  if (type === "idCard") {
    return new RandExp(/(^\d{18}$)|(^\d{17}(\d|X|x)$)/).gen();
  }
};
export default {
  components: {
    myTable,
  },
  data() {
    return {
      // 表格配置
      tableOption: [
        { width: "80", prop: "name", label: "姓名" },
        { width: "80", prop: "sex", label: "性别" },
        { width: "200", prop: "day", label: "出生年月" },
        { width: null, prop: "address", label: "家庭地址" },
        { width: "200", prop: "idCard", label: "证件号" },
        { width: "160", prop: "phone", label: "手机号" },
        { width: "160", prop: "img", label: "大头贴", slotName: "img" },
        { width: "140", prop: "isMark", label: "开启跟踪", slotName: "isMark" },
        { width: "200", prop: "tags", label: "性格标签", slotName: "tags" },
        { width: "200", prop: "", label: "操作", slotName: "operate" },
      ],
      // 表格数据
      tableData: [
        {
          name: "孙一",
          sex: 0,
          day: randomStr("date"),
          address: "安徽省",
          phone: randomStr("phone"),
          img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "王二",
          sex: 1,
          day: "1992-01-01 00:00:00",
          address: "浙江省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201903%2F06%2Fd0533b7a68.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=e56dc8bdfc4747ac926be91922fc2e38",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "张三",
          sex: 0,
          day: "1993-01-01 00:00:00",
          address: "江西省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201905%2F14%2F26e2484a57.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=73e0ac038b3e75076501d60280d3345b",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "李四",
          sex: 1,
          day: "1994-01-01 00:00:00",
          address: "湖北省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201606%2F03%2Fb193d4e5a6.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=8261249a3903342446290a29ca06a94d",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "赵五",
          sex: 0,
          day: "1995-01-01 00:00:00",
          address: "湖南省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn3.mm683.com%2Fimg%2Ftouxiang%2F1567048102%2F1567048102-10.jpg&refer=http%3A%2F%2Fcdn3.mm683.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=ce80835d1c8ce6e8d159a6ae70ba148a",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "马六",
          sex: 1,
          day: "1996-01-01 00:00:00",
          address: "广东省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201802%2F10%2F8b951a6ea1.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=1250ac96bb26f86921f74d013032a04a",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "钱七",
          sex: 0,
          day: "1997-01-01 00:00:00",
          address: "黑龙江",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201905%2F14%2Fd9a4c50fce.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=aa2bd1fdbc1de10572e24393444aeb8e",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "刘八",
          sex: 1,
          day: "1998-01-01 00:00:00",
          address: "福建省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FTX5381_04.jpg&refer=http%3A%2F%2Fwww.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=d4ad99abd27519c2ec90ef8cd0c1ca31",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "郑九",
          sex: 0,
          day: "1999-01-01 00:00:00",
          address: "上海市",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F202007%2F06%2Ff14583b7c5.png%3Fdown&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=a9c9b2b0afedd29f03882bea880c8bdf",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "周十",
          sex: 1,
          day: "2000-01-01 00:00:00",
          address: "北京市",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201712%2F05%2Fab5f76c8a6.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593642&t=6a02042ba34d81136a60eedd2b962b34",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "吴百",
          sex: 0,
          day: "2001-01-01 00:00:00",
          address: "江苏省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-afc48af4e77158eba7aa2e35a0e3a01e_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593677&t=fa2063579e1f98878764352a5b67abb5",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "冯千",
          sex: 1,
          day: "2002-01-01 00:00:00",
          address: "山东省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2016%2F11%2F25%2F01413251309.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593775&t=286b6a71d4e69120502d46f5e3572738",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "魏万",
          sex: 0,
          day: "2003-01-01 00:00:00",
          address: "吉林省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201910%2F29%2Fb26f6b56a2.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593775&t=213721a29f02dd4f8ac8456747c97677",
          idCard: randomStr("idCard"),
          isMark: false,
          tags: ["顽皮", "自大", "嚣张"],
        },
        {
          name: "蒋亿",
          sex: 1,
          day: "2004-01-01 00:00:00",
          address: "河北省",
          phone: randomStr("phone"),
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201910%2F29%2F800982e3d7.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626593775&t=9b642d307da41b9c694f84e5e2fd9c51",
          idCard: randomStr("idCard"),
          isMark: true,
          tags: ["顽皮", "自大", "嚣张"],
        },
      ],
    };
  },

  created() {},
  methods: {
    // 跟踪开关切换
    switchChange(data) {
      console.log(data);
    },
    // 点击查看按钮
    previewCurrent(data) {
      console.log(data);
    },
    // 点击编辑按钮
    editCurrent(data) {
      console.log(data);
    },
    // 点击删除按钮
    deleteCurrent(data) {
      console.log(data);
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}
.tags {
  margin-right: 4px;
  &:last-child {
    margin-right: unset;
  }
}
</style>
